<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="/js/jquery.js"></script>
        <script src="/js/bootstrap.min.js"></script>
        <link href="/css/bootstrap.min.css" rel="stylesheet">
        <link href="/css/Font-Awesome-3.2.1/css/font-awesome.min.css" rel="stylesheet">
        <script src="/js/pintuer.js"></script>
        <!--font-awesome 核心我CSS 文件-->

        <style type="text/css">
            body{
                background: url(/imgs/dengru.jpg) no-repeat;
                background-size:cover;
                font-size: 20px;
            }
            .form{
                background: rgba(255,255,255,0.2);
                width:400px;
                margin:150px auto;
            }
            .icon-user{
                display: inline-block;
                top: 30px;
                left: 6px;
                position: relative;
                color: #ccc;
            }
            .icon-lock{
                display: inline-block;
                top: 30px;
                left: 6px;
                position: relative;
                color: #ccc;
            }
            input[type="text"],
            input[type="password"]{padding-left:26px;}
            .checkbox{
                padding-left:21px;
            }
        </style>
    </head>
    <body>

    <div class="container">
        <div class="form row">
            <form method="post" action="" id='test' class="form-horizontal col-sm-offset-3 col-md-offset-3">

                <h3>瓜子二手车后台登入</h3>
                <div class="col-sm-9 col-md-9">
                    <div class="form-group">
                        <i class="icon-user"></i>
                        <input class="form-control" type="text" id="one" placeholder="用户名" name="name" autofocus="autofocus" maxlength="20"/>
                    </div>
                    <div class="form-group">
                            <i class=" icon-lock"></i>
                            <input class="form-control " checked="false" type="password" id="two" placeholder="密码" name="password" maxlength="8"/>
                    </div>
                    <div class="form-group">
                        <label class="checkbox">
                            <input type="checkbox" id="pick" name="pick" value=""/>记住密码
                        </label>
                        <hr/>
                    </div>
                    <div class="form-group">
                    <input type="submit"  class="btn btn-success pull-right" value="登入 "/>
                    </div>
                </div>
            </form>
        </div>
    </div>
    </body>
    <script>
               var form = document.getElementById('test');
               var one = document.getElementById('one');
               var two = document.getElementById('two');
               var inp = document.getElementById('pick');
               if (localStorage.getItem('name') && localStorage.getItem('password'))
               {
                        //查处localStorage中的值
                        one.value = localStorage.getItem('name');
                        two.value = localStorage.getItem('password');
                        inp.checked = true;
                }
               form.onsubmit = function()
               {

                    //检测是否获取alue值
                   if (one.value == "" || two.value == "")
                   {
                        alert("用户名或密码不能为空");
                        inp.checked = false;
                        return false;
                   } else {

                        //登入验证
                       if (inp.checked)
                        {
                            //存储localStorage缓存

                            localStorage.setItem('name',one.value);
                            localStorage.setItem('password',two.value);

                        } else {
                            //如果不保存，删除localStorage中的值
                            localStorage.removeItem('name');
                            localStorage.removeItem('password');
                        }

                        var xml = new XMLHttpRequest();
                        xml.open('post','dengru',true);
                        //获取form中的数值，进行数值类型装换(token 错误)
                        var data = "name=" + encodeURIComponent(one.value) + "&password=" + encodeURIComponent(two.value) + '&_token=' + '{!! csrf_token() !!}';
                        xml.setRequestHeader('Content-type','application/x-www-form-urlencoded');
                        xml.send(data);

                        xml.onreadystatechange = function()
                        {
                            if (this.readyState == 4)
                            {
                                //console.log(this.responseText);
                                if (xml.responseText == 1)
                                {
                                    return self.location='admin';
                                } else {
                                    alert('用户名和密码不匹配');
                                }
                            }

                        }

                    return false;
                    }
               }
    </script>
</html>
